<template>
  <div>
    <van-nav-bar
      style="color: #fff"
      title="我的发布"
      @click-left="$router.back()"
      left-arrow
    />
    <div class="list_item" v-for="(v, i) in collectlist" :key="v._id">
      <div class="shanchu">
        <div class="title">{{ v.title }}</div>
        <button @click="shanchu(i)">删除发布</button>
      </div>
      <div class="img_type2">
        <img v-for="img in v.imageSrc" :src="img" />
      </div>
      <div class="aricle_bottom">
        <span>{{ v.author }}</span>
        <span>{{ v.comment }}评论</span>
        <span>{{ v.time | formatDate }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collectlist: [],
      uid: "",
    };
  },
  mounted() {
    this.uid = localStorage.getItem("uid");

    this.GetFavList();
  },
  methods: {
    async GetFavList() {
      let { uid } = this;
      console.log(this.uid);
      const { data: res } = await this.axios({
        method: "GET",
        url: "/api/get_user_article_list",
        params: {
          uid: uid,
          skip: 0,
          limit: 10,
        },
      });
      console.log(res);
      this.collectlist = res.data;
      console.log(this.collectlist);
    },
    async shanchu(i) {
      let { uid } = this;
      console.log(i);
      const { data: res } = await this.axios.post("/api/del_user_article", {
        _id: this.collectlist[i]._id,
        uid: uid,
      });
      console.log(res);
      this.GetFavList();
    },
  },
  filters: {
    formatDate(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return "";
      } else {
        let date = new Date(value);
        let y = date.getFullYear(); // 年
        let MM = date.getMonth() + 1; // 月
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate(); // 日
        d = d < 10 ? "0" + d : d;
        // let h = date.getHours(); // 时
        // h = h < 10 ? "0" + h : h;
        // let m = date.getMinutes(); // 分
        // m = m < 10 ? "0" + m : m;
        // let s = date.getSeconds(); // 秒
        // s = s < 10 ? "0" + s : s;
        // return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        return y + "-" + MM + "-" + d;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #4fc08d;
}
.shanchu {
  display: flex;
  justify-content: space-between;
  button {
    font-size: 10px;
    width: 40px;
    border-radius: 5px;
    border: 0;
    margin-right: 5px;
  }
}

.shoucang {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  padding-top: 20px;
  background-color: #4fc08d;
  color: #fff;
}
.list_item {
  width: 100%;
  padding: 12px 0 0 0;
  .title {
    margin: 0 0 10px 0;
  }
}
.img_type1 {
  width: 100%;
  height: 210px;
  img {
    width: 100%;
    height: 210px;
  }
}
.img_type2 {
  width: 100%;
  height: 75px;
  display: flex;
  overflow: hidden;
  img {
    width: 32%;
    margin-right: 2%;
  }
}

.aricle_bottom {
  display: flex;
  height: 40px;
  align-items: center;
  color: #888;

  font-size: 14px;
  span {
    margin-right: 20px;
  }
}
</style>